import { useLocation } from 'react-router-dom'
import React, { useEffect, useState, useRef } from 'react'
import { Button, Statistic, Modal, Layout, Select, Tooltip, Image, Avatar, Card, Tag, message, Descriptions, Input, Upload, Row, List, Popover, Col, Typography, Divider } from 'antd';
import { UploadOutlined, LeftCircleTwoTone, DeleteTwoTone, PlusSquareTwoTone, EditTwoTone, EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import axios from 'axios';
import moment from 'moment'
const { Option } = Select;
const { Title } = Typography;
const { Content, } = Layout;
const { Meta } = Card;
export default function Index() {
  const navigate = useNavigate()
  const location = useLocation();
  const [orgNoticeList,setOrgNoticeList] = useState([]);
  useEffect(() => {
    console.log(location);
    axios.get("http://localhost:8080/qryOrgNoticeList?orgid="+location.state.id).then(resp=>{
      setOrgNoticeList(resp.data.data)
    })
  }, [])
  const data = [{ title: 'ceshi' }, { title: 'ceshi' }, { title: 'ceshi' }, { title: 'ceshi' }, { title: 'ceshi' }, {}, {}, {}]
  return (
    <Content style={{ padding: 15, backgroundColor: '#FFF' }} className="animate__animated animate__fadeIn">
      <Row>
        <Col>
          <Title level={3}><Tooltip title="点击返回" onClick={() => { navigate('/userMenu/orgList/*') }}><a ><LeftCircleTwoTone /></a></Tooltip></Title>

        </Col>

      </Row>

      <Row align="middle" justify="space-around">
        <Col span={6} justify="center">
          <Avatar src={`http://localhost:8080/getOrgHead?id=${location.state.id}`} alt='用户头像' size={100} />
        </Col>
        <Col span={12} offset={5}>
          <Descriptions bordered column={2} size="middle " labelStyle={{ minWidth: 50 }}>
            <Descriptions.Item label="昵称">{location.state.orgname}</Descriptions.Item>

            <Descriptions.Item label="介绍">{location.state.orgmsg}</Descriptions.Item>
            <Descriptions.Item label="地址" >{location.state.address}</Descriptions.Item>
            <Descriptions.Item label="联系电话">{location.state.phone}</Descriptions.Item>
            <Descriptions.Item label="需要物资">{location.state.goodsneed.map((item, index) => {

              return (
                <Tag color="green">{item.goodsname}</Tag>
              )
            })}</Descriptions.Item>
          </Descriptions>

        </Col>
        <Divider />
      </Row>
      <Row>
        <Col>
          <Title level={3}>近期动态</Title>
        </Col>
      </Row>
<List
    itemLayout="vertical"
    size="small"
    pagination={{
      pageSize:2,
    }}
    dataSource={orgNoticeList}
    renderItem={item => (
      <List.Item
        key={item.title}
        extra={
          <Image
            width={220}
            height={180}
            alt="logo"
            src={"http://localhost:8080/getNoticePhoto?id="+item.id}
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={`http://localhost:8080/getOrgHead?id=${location.state.id}`} />}
          title={item.title}
          description={moment(Number(item.createtime)).format('YYYY-MM-DD HH:mm:ss')}
        />
        {item.msg}
      </List.Item>
    )}
  />



    </Content>
  )
}
